<template>
    <div class="search_bt" ref="search_bt">
        <el-input
            ref="search_input"
            v-model="search_data"
            size="medium"
            placeholder="输入关键字"
            @focus="search_contextmenu_show=true"
            @change="on_search">
            <el-button 
                slot="prepend" 
                icon="el-icon-search"
                @click="on_search">
            </el-button>
        </el-input>
        <div 
            ref="search_contextmenu"
            class="search_contextmenu" 
            v-show="search_contextmenu_show">
            <div class="top">
                <div class="left">
                    历史记录
                </div>
                <div class="right" @click="remove_history(undefined)">
                    清除记录
                </div>
            </div>
            <div class="container">
                <div class="item" 
                    v-for="(item,index) in search_data_history" 
                    :key="index"
                    @click.stop="on_item(item)">
                    <div class="left">
                        {{item}}
                    </div>
                    <div class="right" @click.stop="remove_history(index)">
                        <i class="el-icon-close"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default { //搜索按钮组件
    name: 'Search_bt',
    data(){
        return{
            search_contextmenu_show:false,
            search_data:'',
            search_data_history:[],
        };
    },
    mounted(){
        const search_data_history = localStorage.getItem('search_data_history');
        if(search_data_history){  //初始化历史记录
            this.search_data_history = JSON.parse(search_data_history);
        }
        document.addEventListener('click', event => {  //如果元素不是在组件上点击的则隐藏该组件
            const e = event || window.event;
            try {
                if (!this.$refs.search_bt.contains(e.target) && !this.$refs.search_contextmenu.contains(e.target)) {
                    this.search_contextmenu_show = false;
                }
            }catch(err){
                console.log(err);
            }
        });
    },
    watch:{
        search_data_history(){ //历史记录发生改变时存入本地
            localStorage.setItem('search_data_history',JSON.stringify(this.search_data_history));
        },
        '$store.state.search_data'(){ //当全局的search_data清空时相应的清空搜索框的值
            if(!this.$store.state.search_data){
                this.search_data = '';
            }
        },
    },
    methods:{
        on_search(){  //搜索触发函数
            if(this.search_data){ //过滤搜索数据，合规的话进行搜索并加入历史记录
                this.$store.commit('set_search_data',this.search_data);
                this.search_data_history.unshift(this.search_data);
            }else{
                this.$store.commit('remove_search_data');
            }
            this.search_contextmenu_show = false;
            this.$refs.search_input.blur(); //失去焦点
        },
        remove_history(_index=undefined){ //清除历史记录
            if(_index == undefined){ //不传索引表示清除所有历史记录
                this.search_data_history = [];
            }else{
                this.search_data_history.splice(_index,1);
            }
        },
        on_item(item){ //历史记录点击事件
            this.search_data = item;
            this.$store.commit('set_search_data',item);
            this.search_contextmenu_show = false;
        },
    },
}
</script>

<style scoped lang='scss'>
.search_bt{
    width: 100%;
    position: relative;
    z-index: 1;
    height: 36px;
    box-sizing: border-box;
    /deep/.el-input{ 
        border: 1px solid #e8e8e8;
        border-radius: 2px;
        box-sizing: border-box;
        /deep/i{
            font-weight: bold;
            color: #364f6b;
        }
        /deep/.el-input__inner{
            background-color: #e8e8e8;
            border: none;
            border-radius: 2px;
            padding: 0 15px 0 0;
        }
        /deep/.el-input-group__prepend{
            background-color: #e8e8e8;
            border:none;
        }
        &:focus-within{
            &{
                width: 200px;
                position:absolute;
                top: 0;
                left: 0;
                height: 100%;
                background-color: white;
                border: 1px solid #c8ccd3;
                box-shadow: 0 1px 4px 0 rgba(15,32,65,.2);
            } 
            /deep/.el-input__inner{
                background-color: #ffffff;
            }
            /deep/.el-input-group__prepend{
                background-color: #ffffff;
            }
        }
    }
    >.search_contextmenu{
        background-color: yellow;
        position:absolute;
        top: 36px;
        left: 0;
        z-index: 9999;
        width:300px;
        height: fit-content;
        background-color: white;
        border: 1px solid #c8ccd3;
        border-radius: 2px;
        box-shadow: 0 1px 4px 0 rgba(15,32,65,.2);
        >.top{
            padding: 0 15px;
            height: 35px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            >.left{
                font-size: 12px;
                color: rgb(162, 162, 162);
                line-height: 100%;
            }
            >.right{
                font-size: 12px;
                color: #2980ff;
                line-height: 100%;
                cursor: pointer;
            }
        }
        >.container{
            max-height: 250px;
            overflow: auto;
            padding-bottom: 5px;
            >.item{
                padding: 0 15px;
                height: 35px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
                transition: all 0.2s;
                >.left{
                    overflow: hidden;
                    font-size: 14px;
                    color: rgb(77, 77, 77);
                    line-height: 100%;
                    margin-right: 15px;
                    box-sizing: border-box;
                }
                >.right{
                    i{
                        font-size: 15px;
                        line-height: 100%;
                        &:hover{
                            color: #ff2e63;
                        }
                    }
                }
                &:hover{
                    background-color: #f5f8fa;
                }
            }
        }
    }
}
</style>
